<template>
  <div class="container">
    <el-form
      ref="resetForm"
      :model="resetForm"
      :rules="resetFormRules"
      status-icon
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="旧手机号：" prop="phone" style="border-bottom:1px solid #eee;height:60px">
        <el-input v-model="resetForm.phone" placeholder="请输入旧手机号">
          <div slot="append" @click="sendcode">{{ codeText }}</div>
        </el-input>
      </el-form-item>
      <el-form-item label="验证码：" prop="sms_code" style="border-bottom:1px solid #eee;height:60px">
        <el-input v-model="resetForm.sms_code" placeholder="请输入验证码" />
      </el-form-item>
      <el-form-item label="新密码：" prop="newpwd" style="border-bottom:1px solid #eee;height:60px">
        <el-input v-model="resetForm.password" type="password" show-password placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item label="确认密码：" prop="newpassword1" style="border-bottom:1px solid #eee;height:60px">
        <el-input v-model="resetForm.confimPwd" type="password" show-password placeholder="请输入确认密码" />
      </el-form-item>
    </el-form>
    <el-button type="primary" style="width:500px;margin-top: 30px;" @click.native.prevent="changePwd">确认修改</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isSend: true,
      num: 60,
      codeText: '获取验证码',

      resetForm: {
        phone: '',
        sms_code: '',
        password: '',
        confimPwd: ''
      },

      resetFormRules: {
        phone: [
          { required: true, message: '请输入旧手机号', trigger: 'blur' }
        ],
        sms_code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        newpwd: [
          { required: true, validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('请输入新密码'))
            } else if (value.toString().length < 6 || value.toString().length > 18) {
              callback(new Error('密码长度为6-18位'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        newpassword1: [
          { required: true, validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'))
            } else if (value !== this.resetForm.confimPwd) {
              callback(new Error('两次输入密码不一致!'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    changePwd() {
      this.$refs.resetForm.validate(valid => {
        if (valid) {
          this.$request.post('/admin/forget/password', this.resetForm).then(res => {
            if (res.code == 200) {
              this.$message.success('修改成功')
              this.$store.dispatch('user/logout').then(_ => {
                this.$router.push(`/login?redirect=${this.$route.fullPath}`)
              }).catch()
            }
          }).catch()
        }
      })
    },
    sendcode() {
      const that = this
      if (!this.isSend) return
      if (!this.resetForm.phone) {
        this.$message.error('请输入手机号')
      } else if (this.resetForm.phone.length != 11) {
        this.$message.error('请正确输入11位手机号')
      } else {
        this.$request.post('/common/test_send_code', { phone: this.resetForm.phone }).then(res => {
          if (res.code == 200) {
            this.isSend = false;
            (function settime() {
              if (that.num <= 0) {
                that.num = 60
                that.codeText = '重新获取'
                that.isSend = true
              } else {
                that.num--
                that.codeText = that.num + 's'
                setTimeout(function() {
                  settime()
                }, 1000)
              }
            })()
          }
        }).catch()
      }
    }
  }
}
</script>

<style scoped>
    .container /deep/ .el-input__inner{
        border: none;
        padding: 0;
    }
    .container /deep/ .el-form-item__error{ padding: 0; }
    .container /deep/ .el-input-group__append{
        border: none;
        background-color: #ffff;
        color: #409eff;
        cursor: pointer;
    }
</style>
<style lang="scss" scoped>
    .container{
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-bottom: 100px;
    }

    .el-form {
        width: 500px;
        text-align: center;
    }
</style>
